<template>
  <div class="modelManage">
    <div class="title">
      上传初始模型
    </div>
    <div class="content">
      <div class="left">
        <div class="gn-list">
          <div v-for="(item, index) in listData" :key="index" class="list-item">
            <div class="icon" :style="{opacity: item.active === 3 ? 0 : 1}" :class="item.active === active ? 'active-icon' : 'not-icon'">
              {{ item.icon }}
            </div>
            <div class="text" :class="item.active === active ? 'active-text' : 'not-text'">
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="active === 1 || active === 2" class="title">
          模型文件选择
        </div>
        <div v-if="active === 1 || active === 2" class="item">
          <div class="left-button" @click="openFileDialog">
            选择文件
          </div>
          <div class="right-file">
            {{ active === 1 ? modelFileName || '未选择文件' : active === 2 ? paramsFileName || '未选择文件' : '' }}
          </div>
        </div>
        <div v-else>
          <div class="file-list">
            <div class="file-item">
              <div class="file-label">
                模板文件：
              </div>
              <div class="file-value">
                {{ modelFileName }}
              </div>
            </div>
            <div class="file-item">
              <div class="file-label">
                参数文件：
              </div>
              <div class="file-value">
                {{ paramsFileName }}
              </div>
            </div>
          </div>
        </div>
        <div class="button-list">
          <el-button :style="{opacity: active === 1 ? 0 : 1}" type="primary" @click="active = active - 1">上一步</el-button>
          <el-button v-if="active !== 3" type="primary" @click="active = active + 1">下一步</el-button>
          <el-button v-if="active === 3" type="primary">确定</el-button>
        </div>
      </div>
    </div>
    <input ref="fileInput" type="file" style="display: none;" @change="handleFileChange">
  </div>
</template>
<script>
export default {
  name: 'ModelManage',
  data() {
    return {
      active: 1,
      listData: [
        {
          icon: '1',
          text: '模型文件选择',
          active: 1
        },
        {
          icon: '2',
          text: '参数文件上传',
          active: 2
        },
        {
          txt: '3',
          text: '确认',
          active: 3
        }
      ],
      modelFile: null,
      modelFileName: '',
      paramsFile: null,
      paramsFileName: ''
    }
  },
  methods: {
    openFileDialog() {
      this.$refs.fileInput.click()
    },
    // 选择文件
    handleFileChange(event) {
      const file = event.target.files[0]
      if (this.active === 1) {
        this.modelFileName = file.name
        this.modelFile = file
      } else {
        this.paramsFileName = file.name
        this.paramsFile = file
      }
      console.log(file)
      if (file) {
        this.selectedFile = file
        this.selectedFileName = file.name
        // this.uploadFile(file);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .modelManage{
        display: flex;
        flex-direction: column;
        height: calc(100vh - 50px);
        padding: 15px 20px;
        background-color: #f7f8f9;
    }
    .content{
        display: flex;
        height: 500px;
        margin-top: 20px;
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 2px 3px 1px rgba(0,0,0,0.2);
        .left{
            display: flex;
            padding: 20px;
            width: 250px;
            border-radius: 5px;
            border: 1px solid #88888850;
            .gn-list{
                flex: 1;
                .list-item{
                    display: flex;
                    align-items: center;
                    width: 100%;
                    margin-bottom: 20px;
                    .icon{
                        width: 20px;
                        height: 20px;
                        margin-right: 15px;
                        text-align: center;
                        line-height: 20px;
                        border-radius: 20px;
                        font-size: 11px;
                    }
                    .text{
                        font-size: 13px;
                    }
                }
            }
            .active-icon{
                background-color: #90be55;
                color: #fff;
            }
            .active-text{
                color: #90be55;
            }
            .not-icon{
                background-color: #f1f1f9;
                color: #90be55;
            }
            .not-text{
                color: #666666;
            }
        }
        .right{
            position: relative;
            flex: 1;
            padding: 20px;
            border-radius: 5px;
            border: 1px solid #88888850;
            .title{
                font-weight: bold;
            }
            .item{
                display: flex;
                height: 40px;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
                margin-top: 20px;
                .left-button{
                    width: 110px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    font-size: 13px;
                    background-color: #e9ecef;
                    cursor: pointer;
                }
                .right-file{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding-left: 15px;
                    color: #999999;
                    font-size: 13px;
                }
            }
            .button-list{
                position: absolute;
                width: calc(100% - 40px);
                bottom: 20px;
                display: flex;
                justify-content: space-between;
            }
            .file-list{
                .file-item{
                    display: flex;
                    height: 40px;
                    .file-label{
                        width: 120px;
                        font-size: 13px;
                        color: #333333;
                    }
                    .file-value{
                        flex: 1;
                        font-size: 13px;
                        color: #666666;
                    }
                }
            }
        }
    }
</style>
